<template>
  <div class="editable-cell">
    <div v-if="editable" class="editable-cell-input-wrapper">
      <template v-if="isNumber">
        <a-input-number
          :value="valueNumber"
          @change="handleChange"
          @keyup.enter.native="check"
          style="width: 100%"
          :precision="2"
        />
      </template>
      <template v-else>
        <a-input :value="value" @change="handleChange" @pressEnter="check" />
      </template>
      <a-icon type="check" class="editable-cell-icon-check" @click="check" />
      <a-icon type="close" class="editable-cell-icon-close" @click="close" />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      <template v-if="isNumber">
        <span>{{ valueNumber || 0 }}</span>
      </template>
      <template v-else>
        <template v-if="value">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ value }}</span>
            </template>
            <span>{{ value | ellipsis(length) }}</span>
          </a-tooltip>
        </template>
        <template v-else>
          <span>{{ value || '\u2002' }}</span>
        </template>
      </template>
      <a-icon type="edit" class="editable-cell-icon" @click="edit" v-has="'attendanceSalaryChild:add'" />
    </div>
  </div>
</template>

<script>
import JEllipsis from '@comp/jeecg/JEllipsis'

export default {
  name: 'EditableCellTable',
  components: {
    JEllipsis,
  },
  props: {
    text: String,
    textNumber: Number,
    isNumber: false,
    length: {
      type: Number,
      required: false,
      default: 25,
    },
  },
  data() {
    return {
      value: this.text,
      valueNumber: this.textNumber,
      editable: false,
      deepV: '',
      deepVN: null,
    }
  },
  watch: {
    text(val) {
      if (!val) {
        this.value = ''
      } else {
        this.value = val
      }
    },
    textNumber(val) {
      if (!val) {
        this.valueNumber = null
      } else {
        this.valueNumber = val
      }
    },
  },
  methods: {
    handleChange(e) {
      if (this.isNumber) {
        const value = e
        this.valueNumber = value
      } else {
        const value = e.target.value
        this.value = value
      }
    },
    check() {
      this.editable = false
      if (this.isNumber) {
        if (typeof this.valueNumber !== 'number') {
          var typeHandle = Number(this.valueNumber)
          this.$emit('change', typeHandle)
        } else {
          this.$emit('change', this.valueNumber)
        }
      } else {
        this.$emit('change', this.value)
      }
    },
    edit() {
      let one = this.value
      let two = this.valueNumber
      this.deepV = one
      this.deepVN = two
      this.editable = true
    },
    close() {
      this.value = this.deepV
      this.valueNumber = this.deepVN
      this.editable = false
    },
  },
}
</script>

<style scoped lang="less">
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper {
  padding-right: 40px;
}

.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon-close,
.editable-cell-icon {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon-check {
  position: absolute;
  right: 20px;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check,
.editable-cell-icon-close {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover,
.editable-cell-icon-close:hover {
  color: #108ee9;
}
</style>